<%--
  Created by cofey on 16/11/20.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>AP设备统计</title>
</head>
<body>

<div id="urHere">无线南山统一管理平台<b>></b><strong>AP设备统计</strong></div>
<div id="index" class="mainBox" style="padding-top:18px;height:auto!important;height:550px;min-height:550px;">
    <div class="navList">
        <ul class="tab" style="margin-bottom: 20px;">
            <c:choose>
                <c:when test="${hotspotType == 2}">
                    <li><a href="#" class="selected">移动</a></li>
                    <li><a href="${ctx}/ap/statistics/1">电信</a></li>
                    <li><a href="${ctx}/ap/statistics/0">全部</a></li>
                </c:when>
                <c:when test="${hotspotType == 1}">
                    <li><a href="${ctx}/ap/statistics/2">移动</a></li>
                    <li><a href="#" class="selected">电信</a></li>
                    <li><a href="${ctx}/ap/statistics/0">全部</a></li>
                </c:when>
                <c:otherwise>
                    <li><a href="${ctx}/ap/statistics/2">移动</a></li>
                    <li><a href="${ctx}/ap/statistics/1">电信</a></li>
                    <li><a href="#" class="selected">全部</a></li>
                </c:otherwise>
            </c:choose>
        </ul>
        <div class="filter">
            <table width="100%">
                <tr>
                    <td align="right" width="10%">时间:</td>
                    <td width="38%">
                        <select name="filter_type" onchange="config.switchDateWhere(this);">
                            <option value="1">当天</option>
                            <option value="2">按天</option>
                            <%--<option value="3">按周</option>--%>
                            <option value="4">按月</option>
                            <option value="5">按年</option>
                        </select>
                        <input type="text" readonly="readonly" class="inpMain Wdate none" name="beginDate2"
                               onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})"/>
                        <em class="none">-</em>
                        <input type="text" readonly="readonly" class="inpMain Wdate none" name="endDate2"
                               onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})"/>

                        <input type="text" readonly="readonly" class="inpMain Wdate none" name="beginDate4"
                               onclick="WdatePicker({dateFmt:'yyyy-MM'})"/>
                        <em class="none">-</em>
                        <input type="text" readonly="readonly" class="inpMain Wdate none" name="endDate4"
                               onclick="WdatePicker({dateFmt:'yyyy-MM'})"/>

                        <input type="text" readonly="readonly" class="inpMain Wdate none" name="beginDate5"
                               onclick="WdatePicker({dateFmt:'yyyy'})"/>
                        <em class="none">-</em>
                        <input type="text" readonly="readonly" class="inpMain Wdate none" name="endDate5"
                               onclick="WdatePicker({dateFmt:'yyyy'})"/>
                        <input name="submit" class="btnGray btnSearch none" type="button" value="筛选"
                               onclick="config.showStatistics();"/>
                        <input name="submit" class="btnGray btnExport" type="button" value="导出"
                               onclick="config.export();"/>
                        <form name="exportForm" method="post">
                            <input type="hidden" name="type"/>
                            <input type="hidden" name="apDeviceId"/>
                            <input type="hidden" name="apDeviceName"/>
                            <input type="hidden" name="beginDate"/>
                            <input type="hidden" name="endDate"/>
                        </form>
                    </td>
                    <%--<td align="right" width="10%">AP设备:</td>
                    <td width="38%">
                        <select name="filter_id" onchange="config.showStatistics();">
                            <option value="0">--全部--</option>
                        </select>
                    </td>--%>
                </tr>
            </table>
        </div>

        <script src="${assets}/plugin/echarts/echarts.js"></script>
        <table width="100%">
            <tr>
                <td width="90%">
                    <div id="lineMain" style="height:400px; margin-top: 20px;"></div>
                </td>
                <td width="10%" valign="top">
                    <b>在线数量</b>
                    <hr/>
                    <p>峰值:<em name="onlineMax">0</em></p>
                    <p>谷值:<em name="onlineMin">0</em></p>
                </td>
            </tr>
        </table>
        <table width="100%">
            <tr>
                <td width="90%">
                    <div id="barMain" style="height:400px; margin-top: 20px;"></div>
                </td>
                <td width="10%" valign="top">
                    <b>上行</b>
                    <hr/>
                    <p>总量:<em name="upTotal">0</em></p>
                    <p>峰值:<em name="upMax">0</em></p>
                    <p>谷值:<em name="upMin">0</em></p>
                    <p>平均值:<em name="upAvg">0</em></p>
                    <br/>
                    <b>下行</b>
                    <hr/>
                    <p>总量:<em name="downTotal">0</em></p>
                    <p>峰值:<em name="downMax">0</em></p>
                    <p>谷值:<em name="downMin">0</em></p>
                    <p>平均值:<em name="downAvg">0</em></p>
                </td>
            </tr>
        </table>
    </div>
</div>
<script type="text/javascript">
    var config = null;
    jQuery(function ($) {
        var $container = $('.mainBox');
        var $filter = $container.find('.filter');
        var $exportForm = $container.find("form[name=exportForm]");
        config = {
            init: function () {
                config.showStatistics();

                /*var hotspotType = '${hotspotType}';
                $.get("${ctx}/ap/all/" + hotspotType, function (res) {
                    var $id = $filter.find("select[name=filter_id]");
                    for (var i = 0; i < res.length; i++) {
                        var value = res[i].id;
                        var text = res[i].apIndex;
                        $id.append("<option value='" + value + "'>" + text + "</option>");
                    }
                });*/
            },
            switchDateWhere: function (obj) {
                var type = $(obj).val();
                if (type != '1') {
                    $(obj).siblings().addClass('none');
                    $(obj).siblings('input[name=beginDate' + type + ']').removeClass('none');
                    $(obj).siblings('input[name=endDate' + type + ']').removeClass('none');
                    $('.filter').find('.btnSearch').removeClass('none');
                } else {
                    $(obj).siblings().addClass('none');
                    $('.filter').find('.btnSearch').addClass('none');
                    config.init();
                }
            },
            export: function () {
                var type = $filter.find("select[name=filter_type]").val();
                var apDeviceId = $filter.find("select[name=filter_id]").val();
                var beginDate = '', endDate = '', apDeviceName = $filter.find("select[name=filter_id]").text();
                if (type != '1') {
                    beginDate = $filter.find('input[name=beginDate' + type + ']').val();
                    endDate = $filter.find('input[name=endDate' + type + ']').val();
                    if("" == beginDate || "" == endDate){
                        layer.msg("起始日期不能为空");return;
                    }
                }
                $exportForm.find('input[name=type]').val(type);
                $exportForm.find('input[name=apDeviceId]').val(apDeviceId);
                $exportForm.find('input[name=apDeviceName]').val(apDeviceName);
                $exportForm.find('input[name=beginDate]').val(beginDate);
                $exportForm.find('input[name=endDate]').val(endDate);
                $exportForm.attr("action", "${ctx}/export/ap/statistics");
                $exportForm.submit();
            },
            showStatistics: function () {
                var hotspotType = '${hotspotType}';
                var type = $filter.find("select[name=filter_type]").val();
                var apDeviceId = $filter.find("select[name=filter_id]").val();
                var beginDate = '', endDate = '';
                if (type != '1') {
                    beginDate = $filter.find('input[name=beginDate' + type + ']').val();
                    endDate = $filter.find('input[name=endDate' + type + ']').val();

                    if("" == beginDate || "" == endDate){
                        layer.msg("起始日期不能为空");return;
                    }
                }

                $.post('${ctx}/ap/statistics/online/content', {
                    type: type,
                    beginDate: beginDate,
                    endDate: endDate,
                    hotspotType: hotspotType
                }, function (res) {
                    if (res.errorCode != 0) {
                        layer.msg(res.errorMessage);
                        return;
                    }
                    var data = res.result;
                    var lineChart = echarts.init(document.getElementById('lineMain'));
                    var lineOption = {
                        title: {
                            text: data.title.text,
                            left: 'center'
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                saveAsImage: {show: true,}
                            },
                            right: 30
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{b}: {c}'
                        },
                        xAxis: {
                            type: 'category',
                            splitLine: {show: false},
                            data: data.xAxis.data
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                type: 'line',
                                data: data.series.data
                            }
                        ]
                    };
                    lineChart.setOption(lineOption);

                    var onlineData = data.series.data;
                    $container.find("em[name=onlineMax]").text(Math.max.apply(null, onlineData));
                    $container.find("em[name=onlineMin]").text(Math.min.apply(null, onlineData));
                });

                $.post('${ctx}/ap/statistics/traffic/content', {
                    type: type,
                    beginDate: beginDate,
                    endDate: endDate,
                    apDeviceId: apDeviceId,
                    hotspotType: hotspotType
                }, function (res) {
                    if (res.errorCode != 0) {
                        layer.msg(res.errorMessage);
                        return;
                    }
                    var data = res.result;
                    var barChart = echarts.init(document.getElementById('barMain'));
                    var barOption = {
                        title: {
                            text: data.title.text,
                            left: 'center'
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                saveAsImage: {show: true}
                            },
                            right: 30
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: data.legend.data,
                            left: 60
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: data.xAxis.data,
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: data.series
                    };
                    barChart.setOption(barOption);

                    var series = data.series;
                    var upData = series[0].data;
                    var downData = series[1].data;

                    var upTotal = 0;
                    for (var i = 0; i < upData.length; i++) {
                        upTotal += parseFloat(upData[i]);
                    }
                    var upAvg = parseFloat(upTotal) / parseFloat(upData.length);
                    $container.find("em[name=upTotal]").text(upTotal);
                    $container.find("em[name=upMax]").text(Math.max.apply(null, upData));
                    $container.find("em[name=upMin]").text(Math.min.apply(null, upData));
                    $container.find("em[name=upAvg]").text(upAvg.toFixed(2));

                    var downTotal = 0;
                    for (var i = 0; i < downData.length; i++) {
                        downTotal += parseFloat(downData[i]);
                    }
                    var downAvg = parseFloat(downTotal) / parseFloat(downData.length);
                    $container.find("em[name=downTotal]").text(downTotal);
                    $container.find("em[name=downMax]").text(Math.max.apply(null, downData));
                    $container.find("em[name=downMin]").text(Math.min.apply(null, downData));
                    $container.find("em[name=downAvg]").text(downAvg.toFixed(2));
                });
            }
        }
        config.init();
    });
</script>
</body>
</html>
